<template>
  <div>
    <el-form
      ref="addForm"
      :model="customer"
      :rules="rules"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        background-color: #fff;
        padding: 10px;
      "
    >
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        基础信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="市场:">
            <el-select
              v-model="customer.market"
              placeholder="请选择 内销、外销"
            >
              <el-option
                v-for="item in marketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国家:">
            <el-select v-model="customer.country" placeholder="请选择">
              <el-option
                v-for="item in countryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商公司名称" prop="company">
            <el-input v-model="customer.company" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机型">
            <el-input v-model="customer.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="成交或询价产品">
            <el-checkbox-group v-model="product">
              <el-checkbox label="配件" value="配件" />
              <el-checkbox label="固定设备" value="固定设备" />
              <el-checkbox label="移动设备" value="移动设备" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="感兴趣的产品">
            <el-input v-model="customer.interestProduct" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户联系人">
            <el-input v-model="customer.contactName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系手机">
            <el-input v-model="customer.mobile" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户邮箱">
            <el-input v-model="customer.customer_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人">
            <el-input v-model="customer.boss" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="老板联系手机">
            <el-input v-model="customer.boss_phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板邮箱">
            <el-input v-model="customer.boss_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系地址">
            <el-input v-model="customer.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户目的港口">
            <el-input v-model="customer.dourier_address" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户分类:">
            <el-select v-model="customer.cid">
              <el-option
                v-for="item in categoryOptions"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型:">
            <el-input v-model="customer.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="公司简介">
            <textarea
              v-model="customer.company_profile"
              rows="5"
              cols="150"
              style="border: #ccc solid 1px"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户目的地:">
            <el-input v-model="customer.destination" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="padding-left: 20px" label="目的地和快递是否一致">
            <el-radio-group v-model="customer.isFit">
              <el-radio :value="1">一致</el-radio>
              <el-radio :value="0">不一致</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="15">
          <el-form-item label="快递地址:">
            <el-input v-model="customer.dourier_address" />
          </el-form-item>
        </el-col>
      </el-row>

      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        账号信息
      </div>
      <el-form-item style="width: 500px; margin-top: 20px" label="归属销售">
        <el-input class="ipt" />
      </el-form-item>
      <el-form-item style="width: 500px" label="账号:" prop="account">
        <el-input v-model="customer.account" class="ipt" @blur="check()" />
      </el-form-item>
      <el-form-item style="width: 500px" label="密码:" prop="password">
        <el-input v-model="customer.password" type="password" class="ipt" />
      </el-form-item>
      <el-form-item style="width: 500px" label="密码验证手机号:">
        <el-input v-model="customer.validMobile" class="ipt" />
      </el-form-item>

      <div style="text-align: center; margin: 20px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { saveCustomer, checkUserAccount } from "@/api/customer.js";
import { ElMessage } from "element-plus";
import { getCategory } from "@/api/category.js";
//路由实例
const router = new useRouter();

const customer = ref({
  account: "",
  address: "",
  boss: "",
  boss_email: "",
  boss_phone: "",
  cid: 0,
  company: "",
  company_profile: "",
  contactName: "",
  country: "",
  customer_email: "",
  customer_type: 0,
  destination: "",
  dourier_address: "",
  id: 0,
  interestPid: "",
  interestProduct: "",
  isFit: 0,
  market: 1,
  mobile: "",
  model: "",
  password: "",
  product: "",
  saleId: 0,
  source: 0,
  target_port: "",
  validMobile: ""
});

//客户分类
const categoryOptions = ref([]);

//内销外销选项
const marketOptions = [
  {
    label: "内销",
    value: 1
  },
  {
    label: "外销",
    value: 2
  }
];
//国家
const countryOptions = ref([
  {
    label: "国内",
    value: 1
  },
  {
    label: "国外",
    value: 2
  }
]);

//声明同名引用
const addForm = ref();
//成交或询价产品
const product = ref([]);

//保存用户
async function save() {
  customer.value.product = product.value.join("");
  let valid = await addForm.value.validate(() => {});
  if (!valid) return; //验证未通过直接返回

  let res = await saveCustomer(customer.value);
  if (res.code == 200) {

    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }
}

//查询客户分类
async function queryCustomerCategory() {
  let res = await getCategory();
  if (res.code == 200) {
    categoryOptions.value = res.data;
  }
}

//取消
function close() {
  router.push("/customer/list");
}

//账号失焦点检查是否存在
//检测账号是否存在
async function check() {
  if (customer.value.account == "") {
    ElMessage({
      message: "请输入账号",
      type: "warning"
    });
    return; //程序 返回  不再执行
  }
  //验证账号是否存在
  let res = await checkUserAccount(customer.value.account);
  if (res.code == 200) {
    if (res.data == "yes") {
      ElMessage({
        message: "该账号已存在！",
        type: "warning"
      });
    }
  }
}


//验证规则
const rules = {
  company: [{ required: true, message: "请输入客户名称名称", trigger: "blur" }],
  account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
};

//生命周期
onBeforeMount(() => {
  queryCustomerCategory();
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
